<template>
    <uni-popup ref="popup" type="center" :show="showPopup" @close="$emit('close')">
        <view class="popup-content">
            <div class="viuewb">
                <img class="tanchaung" src="/static/tanchaung1.webp" />
                <div class="positions">
                    <!-- 点领奖会弹出填写收货信息，有收货人名字，手机号，地址，身份证号 -->
                </div>
            </div>
        </view>
    </uni-popup>
</template>

<script>
export default {
    props: {
        score: {
            type: Number,
            default: 0
        },
        correctCount: {
            type: Number,
            default: 0
        },
        totalCount: {
            type: Number,
            default: 0
        },
        showPopup: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
        }
    },
    watch: {
        showPopup(newVal) {
            if (newVal) {
                this.open();
            } else {
                this.closed();
            }
        }
    },
    methods: {
        open() {
            this.$refs.popup.open()
        },
        closed() {
            this.$emit('close');
        },
        handleLottery() {
            // 处理抽奖逻辑
            uni.showToast({
                title: '开始抽奖',
                icon: 'none'
            });
        },
        handleInvite() {
            // 处理邀请好友逻辑
            uni.showToast({
                title: '邀请好友',
                icon: 'none'
            });
        }
    },
}
</script>
<style scoped>
.results {
    font-weight: bold;
    text-align: center;
    font-size: 35rpx;
}

.close {
    position: absolute;
    width: 100rpx;
    height: 100rpx;
    top: 0;
    right: 0;
}

.yaoqinghy {
    width: 200rpx;
    line-height: 60rpx;
    color: white;
    text-align: center;
    height: 60rpx;
    background: linear-gradient(to top, rgb(33, 155, 255), rgb(0, 83, 238));
    border-radius: 30rpx;
    border-top: solid 1px rgb(206, 206, 206);
}

.img {
    width: 200rpx;
    display: block;
    margin: 0 20rpx;
}

.choujiang {
    display: flex;
    justify-content: center;
    justify-items: center;
    margin-top: 30rpx;
}

.yaoqing {
    text-align: left;
    font-size: 27rpx;
    width: 80%;
    line-height: 40rpx;
    margin: 0 auto;
    margin-top: 70rpx;
    color: rgb(56, 56, 56);
}

.tishi {
    text-align: center;
    color: rgb(0, 58, 105);
    margin-top: 20rpx;
}

.fen {
    font-size: 40rpx;
}

.defen {
    font-size: 180rpx;
    text-align: center;
    font-weight: bold;
    color: rgb(0, 166, 231);
}

.tanchaung {
    width: 100%;
}

.viuewb {
    margin: 0 auto;
    width: 80%;
    overflow: hidden;
    position: relative;
}

.positions {
    width: 100%;
    padding-top: 110rpx;
    position: absolute;
    top: 0;
    left: 0;
}
</style>